<template>
  <div style="margin-bottom: 10px">
  <el-button type="danger" @click="deleteSensitiveWords">批量删除</el-button>
    <el-input style="width: 200px;margin-left: 10px" placeholder="请输入用户名:" v-model="sensitiveWord.word"></el-input>
    <el-button type="primary" style="margin-left: 10px" @click="sensitiveWordPage">确定</el-button>
    <el-button type="warning" style="margin-left: 10px" @click="reset">重置</el-button>
  </div>
  <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="selected"
  >
    <el-table-column type="selection" width="55"/>
    <el-table-column label="关键词" width="320" prop="word"/>
    <el-table-column label="创建时间" width="300" prop="createTime"/>
    <el-table-column label="更新时间" width="300" prop="updateTime"/>
    <el-table-column label="操作" width="380">
      <template #default="scope">
      <el-button type="warning" @click="deleteSensitiveWord(scope.row.id)">删除</el-button>
<!--      <el-button type="primary" @click="router.push('/sensitiveWord/editsensitiveWord?id=' + scope.row.id)">修改</el-button>-->
      <el-button type="primary" @click="editSensitiveWord(scope.row)">修改</el-button>
          <el-dialog v-model="dialogFormVisible" title="修改敏感词" append-to-body>
            <el-form :model="sensitiveWord1">
              <el-form-item label="敏感词" prop="word">
                <el-input v-model="sensitiveWord1.word" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="update">确定</el-button>
                <el-button type="warning" @click="dialogFormVisible=false">取消</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
    </template></el-table-column>
  </el-table>
  <el-pagination background layout="prev, pager, next" :total="total"
  style="position: absolute;bottom: 50px" v-model:current-page="sensitiveWord.pageNo" v-model:page-size="sensitiveWord.pageSize"
  @current-change="changeCurrentPage"/>

</template>


<script setup>
import {onMounted, ref} from "vue";
import {
  deleteById,
  deleteByIds,
  sensitiveWordPageListAndSearch, updateSensitiveWord
} from "../../apis/SensitiveWordApi.js";
import {elPrompt} from "../../utils/elPrompt.ts";

const tableData = ref()
const total = ref(10)
const sensitiveWords={ids:[]}
const sensitiveWord = ref({
  word:'',
  pageSize:7,
  pageNo:1
})

const sensitiveWord1= ref({
  word:''
})

const  dialogFormVisible = ref(false)
function selected(value){
  for (let index in value){
    sensitiveWords.ids.push(value[index].id)
  }
}


function deleteSensitiveWord(id){
  deleteById(id,(result)=>{
    sensitiveWordPage()
  })
}


function deleteSensitiveWords(){
  deleteByIds(sensitiveWords,(result)=>{
    sensitiveWordPage()
  })
}


function sensitiveWordPage(){
  sensitiveWordPageListAndSearch(sensitiveWord.value,(result)=>{
    tableData.value = result.data.dataLists
    total.value = result.data.total
  })
}

function changeCurrentPage(pageNumber){
  sensitiveWord.value.pageNo = pageNumber
  sensitiveWordPage();
}

function editSensitiveWord(sensitiveWord){
  dialogFormVisible.value = true
  sensitiveWord1.value = sensitiveWord
}

function update(){
  updateSensitiveWord(sensitiveWord1.value,(result)=>{
    if (result.status === 200){
      elPrompt("更新成功","success")
      dialogFormVisible.value = false
    }else {
      elPrompt(result.status,"error")
    }
  })
}

function reset(){
  sensitiveWord.value.word = null;
  sensitiveWordPage();
}

onMounted(()=>{
  sensitiveWordPage()
})
</script>



<style scoped lang="less">
.admin-home {
  h1 {
    text-align: center;
  }
}
</style>
